<template>
  <div class="search-table-page">
    <div class="search-box">
      <Input @on-change="handleClear" clearable placeholder="输入关键字搜索" class="search-input" v-model="searchValue"/>
      <Button @click="handleSearch" class="search-btn" type="primary"><Icon type="search"/>搜索</Button>
    </div>
    <table-page
        :columns1="columns1"
        :data1="data1"
        :totalPage="totalPage"
        :pageSize="pageSize"
        :pageSizeOpts="pageSizeOpts"
        @change-page="changePage"
        @change-page-size="changPageSize">
    </table-page>
  </div>
</template>

<script>
import tablePage from '_c/table-page/table-page.vue'

export default {
  name: 'table_page',
  components: {
    tablePage
  },
  data () {
    return {
      searchValue: '',
      columns1: [
        {
          title: '人员',
          key: 'username'
        },
        {
          title: '操作',
          key: 'shenpistatus'
        },
        {
          title: '意见',
          key: 'shenpicomments'
        },
        {
          title: '时间',
          key: 'time'
        }
      ],
      data1: [],
      totalPage: 0,
      pageSize: 5,
      pageSizeOpts: [5, 10, 15, 20],
      tableData: [],
      info: [
        {
          'username': '智能审批1',
          'shenpistatus': '审批已通过',
          'shenpicomments': '自动审批通过',
          'time': '2017-07-24 18:11'
        },
        {
          'username': '智能审批2',
          'shenpistatus': '审批已通过',
          'shenpicomments': '自动审批通过',
          'time': '2017-07-24 18:11'
        },
        {
          'username': '智能审批3',
          'shenpistatus': '审批已通过',
          'shenpicomments': '自动审批通过',
          'time': '2017-07-24 10:04'
        },
        {
          'username': '智能审批4',
          'shenpistatus': '审批被拒绝',
          'shenpicomments': '  收入 > 999 && 支出 < 201',
          'time': '2017-07-24 10:03'
        },
        {
          'username': '智能审批5',
          'shenpistatus': '审批被拒绝',
          'shenpicomments': '  收入 > 999 && 支出 < 201',
          'time': '2017-07-24 10:02'
        },
        {
          'username': '智能审批6',
          'shenpistatus': '审批已通过',
          'shenpicomments': '自动审批通过',
          'time': '2017-07-24 10:02'
        },
        {
          'username': '智能审批7',
          'shenpistatus': '审批被拒绝',
          'shenpicomments': '自动审批通过',
          'time': '2017-07-24 10:01'
        },
        {
          'username': '智能审批8',
          'shenpistatus': '审批被拒绝',
          'shenpicomments': '自动审批通过',
          'time': '2017-07-24 09:56'
        }
      ]
    }
  },
  created () {
    this.$nextTick(() => {
      this.getTableData()
    })
  },
  methods: {
    // 获取表格数据信息
    getTableData () {
      // 保存取到的所有数据
      this.tableData = this.info
      this.totalPage = this.info.length
      // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
      if (this.info.length < this.pageSize) {
        this.data1 = this.tableData
      } else {
        this.data1 = this.tableData.slice(0, this.pageSize)
      }
    },
    // 页码切换
    changePage (page) {
      var _start = (page - 1) * this.pageSize
      var _end = page * this.pageSize
      this.data1 = this.tableData.slice(_start, _end)
    },
    // 切换每页显示多少条数据
    changPageSize (pageSize) {
      this.searchValue = '' // 清空搜索框内容
      this.pageSize = pageSize
      this.getTableData()
    },
    handleClear (e) {
      if (e.target.value === '') this.getTableData()
    },
    handleSearch () {
      this.data1 = this.tableData.filter(item => item.username.indexOf(this.searchValue) > -1)
      this.totalPage = this.data1.length
    }
  }
}
</script>

<style lang="less" scoped>
.search-table-page {
  padding: 20px;
  background-color: #fff;
  .search-box {
    margin-bottom: 20px;
    .search-input {
      width: 200px;
    }
    .search-btn {
      margin-left: 5px;
    }
  }
}
</style>
